<template>
  <!-- 发现音乐 路由 -->
  <div class="discovery">
    <!-- 轮播图 -->
    <el-carousel class="banner" :interval="4000" type="card" height="230px"
      v-if="banner.length>0">
      <el-carousel-item v-for="(item,index) in banner" :key="index">
        <img :src="item.imageUrl" alt="">
      </el-carousel-item>
    </el-carousel>

    <!-- 推荐歌单 -->
    <div class="recommend" v-if="recommend.length>0">
      <h5 class="text">推荐歌单 /</h5>
      <music-card :recommend="recommend"></music-card>
    </div>

    <!-- 最新音乐 -->
    <div class="new" v-if="newMusic.length>0">
      <h5 class="text">最新音乐 /</h5>
      <music-list :new-music="newMusic"></music-list>
    </div>

    <!-- 推荐Mv -->
    <div class="recommend-Mv" v-if="recommendMv.length>0">
      <h5 class="text">推荐MV /</h5>
      <recom-mv :recommend-mv="recommendMv"></recom-mv>
    </div>
  </div>
</template>

<script>
import musicCard from './MusicCard'
import musicList from './MusicList'
import recomMv from './RecomMv'
export default {
  data() {
    return {
      banner: [],
      recommend: [],
      newMusic: [],
      recommendMv: [],
      musicUrl: ''
    }
  },
  components: {
    musicCard,
    musicList,
    recomMv
  },
  created() {
    this.getBanner(),
      this.getRecommend(),
      this.getNewMusic(),
      this.getRecommendMv()
  },
  methods: {
    // 获取轮播图数据
    async getBanner() {
      const res = await this.$request({
        url: 'https://autumnfish.cn/banner'
      })
      this.banner = res.data.banners
    },
    // 获取推荐歌单数据
    async getRecommend() {
      const res = await this.$request({
        url: 'https://autumnfish.cn/personalized'
      })
      let temp = res.data.result
      // 截取前10个元素
      this.recommend = temp.length >= 10 ? temp.slice(0, 10) : temp
    },
    // 获取最新音乐数据
    async getNewMusic() {
      const res = await this.$request({
        url: 'https://autumnfish.cn/personalized/newsong'
      })
      let temp = res.data.result
      // 截取前10个元素
      this.newMusic = temp.length >= 10 ? temp.slice(0, 10) : temp
    },
    // 获取推荐MV数据
    async getRecommendMv() {
      const res = await this.$request({
        url: 'https://autumnfish.cn/personalized/mv'
      })
      let temp = res.data.result
      // 截取前4个
      this.recommendMv = temp.length >= 4 ? temp.slice(0, 4) : temp
    }
  }
}
</script>

<style lang="scss" scoped>
// 轮播图
.discovery {
  max-width: 1100px;
  margin: 0 auto;
}
.banner {
  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
// 推荐歌单
.recommend {
  .text {
    margin: 0 0 20px 8px;
    font-size: 18px;
  }
}
// 最新音乐
.text {
  margin: 30px 0 20px 8px;
  font-size: 18px;
  font-weight: 500;
}
</style>